<template>
    <div class="fillContainer">
      <div>
        <el-form :inline="true" ref="add_data">
          <el-form-item class="btnRight">
            <el-button type="primary" size="small" icon="view" @click="handleAdd()">
              添加
            </el-button>
          </el-form-item>
        </el-form>
        <div id="search">
          <input class="user-input" type="text" name="search" placeholder="请输入内容" v-model="input" @change="search">
          <input class="user-btn" type="button" value="搜索">
        </div>
  
      </div>
      <div class="table_container">
  
  
  
        <el-table :data="info" style="width: 100%" max-height="500px" border min-width="1000px">
          <el-table-column type="index" label="序号" align='center' width="70%">
          </el-table-column>
          <el-table-column prop="title" label="标题" align='center' width="250%">
            <template slot-scope="scope">
              <span> {{ scope.row.Contitle }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="content" label="详细内容" align='center' width="750%">
            <template slot-scope="scope">
              <span> {{ scope.row.ZiContent }}</span>
            </template>
          </el-table-column>
  
          <el-table-column label="操作" align='center' prop="operation" min-width="200px">
            <template slot-scope="scope">
              <el-button type="warning" size="small" icon="edit" @click="handleEdit(scope.$index, scope.row)">编辑
              </el-button>
              <el-button size="small" type="danger" icon="delete" @click="handleDelete(scope.$index, scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row>
          <el-col :span="24">
              <div class="pagination">
                  <el-pagination
                      v-if='paginations.total > 0'
                      :page-sizes="paginations.page_sizes"
                      :page-size="paginations.page_size"
                      :layout="paginations.layout"
                      :total="paginations.total"
                      :current-page.sync='paginations.page_index'
                      @current-change='handleCurrentChange'
                      @size-change='handleSizeChange'>
                  </el-pagination>
              </div>
          </el-col>
      </el-row>
      </div>
  
  
      <Dialog :dialog="dialog" :formData="formData"></Dialog>
    </div>
  </template>
  
  <script>
    import axios from "axios"
    import Dialog from "../components/consultDia"
    import Qs from 'qs'
    export default {
      data() {
        aid:(localStorage.getItem("aId"))
        return {
          aid:(localStorage.getItem("aId")),
         //需要给分页组件传的信息
        paginations: {
          page_index: 1, // 当前位于哪页
          total: 0, // 总数
          page_size: 5, // 1页显示多少条
          page_sizes: [5, 10, 15, 20], //每页显示多少条
          layout: "total, sizes, prev, pager, next, jumper" // 翻页属性
        },
        allTableData: [],
          input: '',
          index: 0,
          info: [],
          formData: {
            id: '',
            Intitle: '',
            ChXin: ''
          },
          dialog: {
            show: false,
            title: '',//添加 编辑
            option: 'edit'
          }
        }
      },
      mounted() {
        this.judge();
        var _this = this;
        axios.get("http://localhost:3000/api/petconsult")
          .then(res => {
            console.log("获取数据成功");
            console.log(res);
            // _this.info = res.data;
            // 设置分页数据
            _this.allTableData = res.data;
             _this.setPaginations();
  
            console.log(_this.info)
  
          })
          .catch(err => {
            console.log('获取数据失败' + err);
          })
  
      },
      components: {
        Dialog
      },
      methods: {
        judge(){
            if(!this.aid){
                this.$message({
                type:'error',
                message:'请先登录'
              })
              this.$router.push({path:'/adlog'});
            }
        },
        handleEdit(index, row) {
          // console.log(123);bianji
          this.dialog = {
            show: true,
            title: '修改信息',
            option: 'edit'
          };
          this.formData = {
            Intitle: row.Contitle,
            ChXin: row.ZiContent,
            id: row.Zid
          }
  
  
        },
        handleDelete(index, row) {
          // console.log(456)
          var flag=confirm("确定要删除这条内容吗？")
          if(flag){
          this.axios({
            method: 'post',
            url: 'http://127.0.0.1:3000/api/postconsult/delete',
            // headers:{
            //    'Content_type':'application/x-www-form-urlencoded'
            // },
            data: {
  
              Zid: row.Zid
            }
          })
            .then(res => {
              this.$message({
                message: '成功',
                type: 'success',
  
              })
              this.dialog.show = false;
              console.log(this.formData);
  
              this.$router.go(0);
            })
            .catch(err => {
              console.log(err)
            })
        }
  
        },
        handleAdd() {
          // console.log(786)
          this.dialog = {
            show: true,
            title: '添加信息',
            option: 'add'
          };
          this.formData = {
            Intitle: '',
            ChXin: ''
          };
          this.dialog.show = true;
  
        },
        search() {
          let _this = this;
          if (_this.input == '') {
            console.log('搜索空字符');
             _this.$router.go(0);
          }
          else {
  
            console.log('搜索' + _this.input);
            let a = _this.allTableData.filter(v => {
              return JSON.stringify(v.ZiContent).indexOf(_this.input) !== -1;
            });
            console.log(a);
            _this.allTableData = a;
            // 分页数据  
          _this.setPaginations();
          }
  
        },
  
        handleCurrentChange(page) {
        // 当前页
        let sortnum = this.paginations.page_size * (page - 1);
        let table = this.allTableData.filter((item, index) => {
          return index >= sortnum;
        });
        // 设置默认分页数据
        this.info = table.filter((item, index) => {
          return index < this.paginations.page_size;
        });
      },
      handleSizeChange(page_size) {
        // 切换size
        this.paginations.page_index = 1;
        this.paginations.page_size = page_size;
        this.info = this.allTableData.filter((item, index) => {
          return index < page_size;
        });
      },
      setPaginations() {
        // 总页数
        this.paginations.total = this.allTableData.length;
        this.paginations.page_index = 1;
        this.paginations.page_size = 5;
        // 设置默认分页数据
        this.info = this.allTableData.filter((item, index) => {
          return index < this.paginations.page_size;
        });
      },
  
      
      }
  
    }
  </script>
  
  <style scoped>
    .fillContainer {
      width: 100%;
      height: 100%;
      padding: 16px;
      box-sizing: border-box;
    }
  
    .btnRight {
      float: right;
    }
  
    .pagination {
      text-align: right;
      margin-top: 10px;
    }
  
    .pagination {
      text-align: right;
      margin-top: 10px;
    }
  
    .user-input {
      width: 90%;
      height: 100%;
      border: 2px solid rgba(0, 123, 255, 0.874);
      border-radius: 5px;
      box-sizing: border-box;
      outline: none;
      text-indent: 10%;
      font-size: 150%;
      font-family: 楷体;
    }
  
    .user-btn {
      width: 40%;
      height: 90%;
      border: none;
      border-radius: 5px;
      background: rgba(0, 123, 255, 0.874);
      vertical-align: middle;
      outline: none;
      color: white;
      font-size: 160%;
      font-family: 楷体;
    }
  
    #search {
      display: flex;
      width: 40%;
      margin-top: 1%;
    }
  </style>